<template>
    <div class='homebox'>
        <div class="back" @click="$router.go(-1)">
            <img src="../assets/img/back1.png" alt="">
            任务详情
        </div>
        <div class="right-bottom">
            <div class="header">{{$route.query.name}}</div>
            <div class="dia-search">
                <el-input
                    style="width:15vw;margin-right:0.6vw;"
                    placeholder="请输入"
                    v-model="reqParamsDirector.actionName"
                    clearable
                    size="mini">
                    <template #prefix>
                        <i class="el-input__icon el-icon-search"></i>
                    </template>
                </el-input>
                <el-button type="primary" size="mini" @click="selectTaskDetails(null)">查询</el-button>
            </div>
            <div class="table-box">
                <comTable
                    @findPage="selectTaskDetails"
                    @handleAction="handleAction"
                    :data="tableDataDirector"
                    :options="options"
                    :pageRequest="reqParamsDirector"
                    :columns="columnsDirector"
                    ref="comtable"
                ></comTable> 
            </div>
        </div>
    </div>
</template>

<script>
import comTable from '../components/Table/comTable'
import {errortip,successtip,warningtip} from '@/utils/util.js';
export default {
    name: '',
    data () {
        return {
            options: {
                loading: false,         // 表格加载动画
                index: true,            // 是否显示序号
                stripe: false,         // 是否为斑马纹
                border: true,          // 是否有边框
                initTable: true,        // 是否一挂载就加载数据
                height: '100%'
            },
            // 任务详情
            tableDataDirector: {
                records: [],
                total: 0
            },
            reqParamsDirector: {
                pageIndex: 1,
                pageSize: 10,
                actionName: '',
                taskId: '',
            },
            columnsDirector: [
                { label: '影响名称', prop: 'actionName',},
                { label: '影响类型', prop: 'actionType',},
                { label: '影响时间', prop: 'actionTime',width: 260},
            ],
        }
    },
    components: {
        comTable,
    },
    created() {
        this.reqParamsDirector.taskId = this.$route.query.id;
    },
    mounted() {

    },
    methods: {
        // 获取任务详情列表
        selectTaskDetails(data) {
            if (data !== null) {
                this.reqParamsDirector.pageIndex = data.pageRequest.pageIndex;
                this.reqParamsDirector.pageSize = data.pageRequest.pageSize;
            }
            let params = this.reqParamsDirector;
            this.$api.task.selectTaskDetails(params).then(res => {
                if(res.code==200) {
                    this.tableDataDirector = res.data;
                } else {
                    errortip(res.msg)
                }
            })
            .then(data != null ? data.callback : "");
        },
        handleAction: function(obj){
            
        },
    },
}
</script>

<style lang='scss' scoped>
.homebox{
    height: 100%;
    .back {
        color: #00D3FA;
        position: relative;
        margin-top: -1vh;
        margin-bottom: 1vh;
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
            width: 2vh;
            margin-right: 5px;
        }
    }
    .header {
        position: relative;
        left: 1vw;
        text-align: left;
        margin-top: 1.5vh;
        text-indent: 1em;
        font-size: 1.2vh;
        font-weight: 700;
        color: #1993DB;
        border-left: 3px solid #1993DB;
    }
    .right-top, .right-bottom {
        height: calc(100% - 2.5vh);
        border: 1px solid #044A7C;
        border-radius: 5px;
        background: #031D38;
        position: relative;
    }
    .right-top {
        margin-bottom: 2vh;
    }
    .table-box {
        height: calc(100% - 10vh);
        margin-top: 1.5vh;
        padding: 0 1vw;
    }
    .dia-search {
        position: absolute;
        right: 1vw;
        top: 1vh;
    }
}
</style>
